<template>
	<view class="content">

		<view class="logo" style="">
			<image src="https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/logo.png"
				mode="widthFix" style="width: 30px;height: 30px;"></image>
			<view style="font-weight: 500;font-size: 22px;color: #FFFFFF;">
				求职精灵
			</view>
		</view>
		<view class="header">

		</view>
		<view class="foot">

		</view>
		<view class="center">
			<image src="https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/ai%20%281%29.png"
				mode="widthFix"></image>
			<view class="text">
				信息提交
			</view>
			<view style="width: 52px;height: 6px;background: #5125B2;margin-bottom: 28px;margin-top: 14px;"></view>

			<view class="input1">
				<view
					style="width: 45px;height:31px;background: url(https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E7%BB%84%203.png) no-repeat;">
				</view>
				<view
					style="font-weight: 400;font-size: 20px;width: 85px;color: #33333D;margin: 0 10px;display: flex;justify-content: space-between;">
					<view>学</view>
					<view>号</view>
				</view>
				<view style="width: 1px;height: 31px;background: #9A9FB7;opacity: 0.5;margin-right: 10px;"></view>
				<input style="font-weight: 400; font-size: 18px; color: #33333D; opacity: 0.5;" class="uni-input"
					v-model="username" placeholder="请输入" />
			</view>
			<view class="input1">
				<view
					style="width: 45px;height:31px;background: url(https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E7%BB%84%203.png) no-repeat;">
				</view>
				<view style="font-weight: 400;font-size: 20px;width: 85px;color: #33333D;margin: 0 10px;">预约号</view>
				<view style="width: 1px;height: 31px;background: #9A9FB7;opacity: 0.5;margin-right: 10px;"></view>
				<input v-model="number" style="font-weight: 400; font-size: 18px; color: #33333D; opacity: 0.5;"
					class="uni-input" placeholder="请输入" />
			</view>
			<view class="submit" @click="login()">
				确认提交
			</view>
		</view>

		<view class="tag">
			<view
				style="background: linear-gradient(90deg, #6400FF 0% , #FF5EFD 100%);display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;margin-left: 15px;">
				AI
			</view>
			<view style="  font-weight: 400; font-size: 15px; color: #282828; opacity: 0.8;">
				，让面试胸有成竹
			</view>
		</view>

	</view>
	<view class="mydialog">
		<uni-popup ref="popupRef" type="dialog">

			<uni-popup-dialog :showClose='false' :showConfirm="false" :type="msgType" title=" "
				content="欢迎使用 uni-popup!">

				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">


					<image
						src="https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9B%BE%E5%B1%82%203%20%E6%8B%B7%E8%B4%9D.png"
						mode="widthFix" style="width: 100px;"></image>
					<view
						style="font-size: 20px;margin: 30px 0;display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<view style="font-weight: bold;">
							您填写学号或者预约号有误
						</view>
						<view style="margin-top: 10px;">
							请检查后重新登陆
						</view>
					</view>
					<view style="width:100%;height: 50px;background: #7349E4;border-radius: 10px;border: 4px solid #FFFFFF;font-weight: 500;
font-size: 22px;line-height: 50px;text-align: center;
color: #FFFFFF;" @click="popupRef.close()">
						关闭
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		formLogin
	} from '../../api/index.js'



	import {
		onLoad
	} from "@dcloudio/uni-app"

	import useLayOutSettingStore from '@/store/counter.js'
	let userStore = useLayOutSettingStore()
	const showError = ref(false);
	const username = ref();
	const number = ref();
	const sense = ref();
	const popupRef = ref(null);
	onLoad((e) => {
		console.log(e, 11)
		sense.value = e.scene
		if (wx.setScreenBrightness) {
			// 保持屏幕常亮 true / false
			wx.setKeepScreenOn({
				keepScreenOn: true
			});
		} else {
			// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
			wx.showModal({
				title: '提示',
				content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			})
		}

		console.log("开始清除本地StorageSync")

		uni.clearStorageSync();


		console.log("清除本地StorageSync完成")
	})

	const openPopup = (() => {
		// 通过ref获取uni-popup组件的实例
		popupRef.value.open();
	})
	const login = (() => {
		// console.log("登录学号", number.value);
		// console.log("登录预约号", username.value);
		userStore.interviewId = number.value
		formLogin({
			studentNum: username.value,
			interviewNum: number.value,
			sense: sense.value
		}).then(res => {
			console.log("登录学号", res.msg);

			if (res.status === "已面试") {
				console.log("222222222211111111111", res);
				uni.navigateTo({
					url: '/pages/complete/complete'
				})
			} else {

				console.log("接口响应", res.token, res.data.studentName);
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('username', res.data.studentName);
				uni.setStorageSync('number', res.data.number);
				uni.setStorageSync('job', res.data.jobName);

				uni.showToast({
					title: '校验成功',
					icon: 'success',
					duration: 1000
				});

				// this.$store.commit('interviewForm', res);

				console.log("页面跳转");

				setTimeout(function() {
					// 在2秒后跳转到指定页面
					uni.navigateTo({
						url: '/pages/reviewer/reviewer'
					})
				}, 1000);

			}





		}).catch(err => {
			console.log("登录学号22222", err);
			openPopup()
			// console.error(err);


		});
	})
</script>

<style lang="less">
	.uni-popup-dialog__close {
		display: none;
	}

	.uni-popup-dialog__confirm {
		display: none !important;
	}

	.content {
		position: relative;
		background: #E4E4FF;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.logo {
			position: absolute;
			top: -24%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.header {
			background: url(https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9B%BE%E5%B1%82%203%402x.png) no-repeat;
			background-size: cover;
			height: 40%;
		}

		.foot {
			background: url(https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9B%BE%E5%B1%82%205.png) no-repeat;
			background-size: cover;
			height: 40%;
		}

		.tag {
			background: url(https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%206.png) no-repeat;
			position: absolute;
			bottom: 5%;
			width: 44%;
			height: 35px;
			line-height: 28px;
			background-size: cover;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

		}

		.center {
			padding: 10px;
			position: absolute;
			top: 26%;
			height: 50%;
			width: 80%;
			left: 50%;
			transform: translateX(-50%);
			background: #FFFFFF;
			box-shadow: 0px 0px 65px 0px rgba(134, 103, 223, 0.29);
			border-radius: 10px;
			border: 4px solid #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 40%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -20%;
			}

			.text {
				width: 100%;
				text-align: center;
				margin-top: 20%;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 34px;
				color: #33333D;
				line-height: 32px;
			}

			.input1 {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10px 10px;
				// height: 89px;
				background: #F3F7F9;
				border-radius: 10px;
				border: 4px solid #FFFFFF;
			}

			.submit {
				width: 100%;
				height: 50px;
				background: #7349E4;
				border-radius: 10px;
				border: 4px solid #FFFFFF;
				text-align: center;
				line-height: 50px;
				font-weight: 500;
				font-size: 20px;
				color: #FFFFFF;
				margin-top: 40px;
			}

			// .line{
			// 	width: 100%;
			// 	text-align: center;
			// }
			// .myinput{

			// }
			// .logo{
			// 	background: url(https://aiinterview-1300324331.cos.ap-shanghai.myqcloud.com/wxminiprograme/ai%20%281%29.png") no-repeat;
			// 	background-size: cover;
			// 	height: 204px;
			// 	width: 193px;
			// }
		}
	}
</style>